import { memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { Link } from 'react-router-dom';
import {
  Button,
  Form,
  Input,
  message,
  Popconfirm,
  Select,
  Table,
  Tag,
} from 'antd';
import { ColumnsType } from 'antd/es/table';
import { resDeleteCommentAdmin, resMyCommentList } from '@/services/comment';
import { useAntdTable } from 'ahooks';
import { itemStyle, style } from '@/pages/Profile/components/MyOrders';
import { formatTime } from '@/utils/format';
import {DeleteTwoTone} from "@ant-design/icons";

const createColumns = (
  refresh: () => void
): ColumnsType<API.CommentDetailStruct> => {
  return [
    {
      title: <div className={'font-bold'}>商品名称</div>,
      align: 'center',
      render: (_, comment) => (
        <Link to={`/goods_detail/` + comment.goods_id}>
          {comment.goods && comment.goods.title}
        </Link>
      ),
    },
    {
      title: <div className={'font-bold'}>评价内容</div>,
      dataIndex: 'content',
      align: 'center',
      ellipsis: true,
    },
    {
      title: <div className={'font-bold'}>评价时间</div>,
      dataIndex: 'created_at',
      align: 'center',
      render: (create_at) => <div>{formatTime(create_at)}</div>,
    },
    {
      title: <div className={'font-bold'}>商家回复</div>,
      dataIndex: 'reply',
      align: 'center',
      ellipsis: true,
    },
    {
      title: <div className={'font-bold'}>评论类型</div>,
      render: (_, comment) => (
        <Tag color={comment.orders_id === 1 ? 'green' : 'orange'}>
          {comment.orders_id === 1 ? '经典书评' : '买家评论'}
        </Tag>
      ),
      align: 'center',
    },
    {
      title: <div className={'font-bold'}>操作</div>,
      align: 'center',
      render: (_, comment) => (
        <div>
          <Popconfirm
            title={'您确定要删除此评论吗'}
            cancelText="取消"
            okText="确定"
            onConfirm={() => {
              resDeleteCommentAdmin(comment.id).then(() => {
                message.success('删除评论成功！');
                refresh();
              });
            }}
          >
            <Button
              type={'link'}
              icon={<DeleteTwoTone twoToneColor={'red'} />}
            />
          </Popconfirm>
        </div>
      ),
    },
  ];
};

const CommentPage: FC<PropsWithChildren<{}>> = () => {
  const [form] = Form.useForm();
  const { tableProps, pagination, search } = useAntdTable(
    ({ pageSize, current }, formData: API.QueryGoodsComment) => {
      return resMyCommentList({
        pageSize,
        current,
        ...formData,
      });
    },
    { form, cacheKey: 'useCommentCache' }
  );

  const columns = createColumns(() => {
    pagination.changeCurrent(pagination.current);
  });

  const { submit } = search;

  const searchForm = (
    <div className={''}>
      <Form form={form} className={'flex'}>
        <Form.Item name="title">
          <Input.Search placeholder="请输入商品名" onSearch={submit} />
        </Form.Item>
      </Form>
    </div>
  );

  return (
    <div style={style} className={'p-4 hidden-scrollbar'}>
      {searchForm}
      <div className={'rounded-lg overflow-hidden'}>
        <Table columns={columns} rowKey="id" {...tableProps} />
      </div>
    </div>
  );
};

export default memo(CommentPage);
